"use client"

import { useRef, useEffect } from "react"
import { View, Text, StyleSheet, TouchableOpacity, Animated, Platform } from "react-native"
import { Check } from "lucide-react-native"
import { theme } from "../../constants/theme"

interface SortOption {
    id: string
    label: string
    icon?: string
}

interface SortMenuProps {
    visible: boolean
    activeSort: string
    options: SortOption[]
    onSelect: (id: string) => void
    onClose: () => void
    style?: any
}

export function SortMenu({ visible, activeSort, options, onSelect, onClose, style }: SortMenuProps) {
    // 动画值
    const sortMenuAnimation = useRef(new Animated.Value(0)).current
    const backdropAnimation = useRef(new Animated.Value(0)).current

    // 处理排序菜单的显示和隐藏
    useEffect(() => {
        if (visible) {
            Animated.parallel([
                Animated.timing(backdropAnimation, {
                    toValue: 1,
                    duration: 300,
                    useNativeDriver: true,
                }),
                Animated.spring(sortMenuAnimation, {
                    toValue: 1,
                    friction: 8,
                    tension: 40,
                    useNativeDriver: true,
                }),
            ]).start()
        } else {
            Animated.parallel([
                Animated.timing(backdropAnimation, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
                Animated.timing(sortMenuAnimation, {
                    toValue: 0,
                    duration: 200,
                    useNativeDriver: true,
                }),
            ]).start()
        }
    }, [visible, sortMenuAnimation, backdropAnimation])

    // 排序菜单动画样式
    const sortMenuStyle = {
        opacity: sortMenuAnimation,
        transform: [
            {
                translateY: sortMenuAnimation.interpolate({
                    inputRange: [0, 1],
                    outputRange: [20, 0],
                }),
            },
            {
                scale: sortMenuAnimation.interpolate({
                    inputRange: [0, 1],
                    outputRange: [0.9, 1],
                }),
            },
        ],
    }

    // 背景动画样式
    const backdropStyle = {
        opacity: backdropAnimation,
    }

    if (!visible) return null

    return (
        <View style={[styles.overlay, style]}>
            <Animated.View style={[styles.backdrop, backdropStyle]} pointerEvents="auto">
                <TouchableOpacity style={{ flex: 1 }} onPress={onClose} activeOpacity={1} />
            </Animated.View>

            <Animated.View style={[styles.menu, sortMenuStyle]}>
                <View style={styles.header}>
                    <View style={styles.handle} />
                    <Text style={styles.title}>选择排序方式</Text>
                </View>

                {options.map((option) => (
                    <TouchableOpacity
                        key={option.id}
                        style={[styles.menuItem, activeSort === option.id && styles.menuItemActive]}
                        onPress={() => {
                            onSelect(option.id)
                            onClose()
                        }}
                    >
                        <Text style={[styles.menuItemText, activeSort === option.id && styles.menuItemTextActive]}>
                            {option.label}
                        </Text>

                        {activeSort === option.id && (
                            <View style={styles.menuItemCheckmark}>
                                <Check size={16} color={theme.colors.primary.default} />
                            </View>
                        )}
                    </TouchableOpacity>
                ))}
            </Animated.View>
        </View>
    )
}

const styles = StyleSheet.create({
    overlay: {
        position: "absolute",
        top: -100, // This ensures we cover the status bar area
        left: 0,
        right: 0,
        bottom: 0,
        justifyContent: "center",
        alignItems: "center",
        zIndex: 1000,
    },
    backdrop: {
        position: "absolute",
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: "rgba(0, 0, 0, 0.5)",
    },
    menu: {
        width: "80%",
        backgroundColor: theme.colors.neutral.white,
        borderRadius: theme.borderRadius.extraLarge,
        overflow: "hidden",
        ...Platform.select({
            ios: {
                shadowColor: "rgba(0, 0, 0, 0.3)",
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.5,
                shadowRadius: 8,
            },
            android: {
                elevation: 8,
            },
        }),
    },
    header: {
        alignItems: "center",
        paddingTop: theme.spacing.md,
        paddingBottom: theme.spacing.sm,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    handle: {
        width: 40,
        height: 4,
        backgroundColor: theme.colors.neutral.lightGray,
        borderRadius: 2,
        marginBottom: theme.spacing.sm,
    },
    title: {
        fontSize: theme.fontSize.lg,
        fontWeight: theme.fontWeight.semiBold,
        color: theme.colors.neutral.black,
        marginBottom: theme.spacing.sm,
    },
    menuItem: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "space-between",
        paddingVertical: theme.spacing.lg,
        paddingHorizontal: theme.spacing.xl,
        borderBottomWidth: 1,
        borderBottomColor: theme.colors.neutral.lightGray,
    },
    menuItemActive: {
        backgroundColor: `${theme.colors.primary.default}10`,
    },
    menuItemText: {
        fontSize: theme.fontSize.md,
        color: theme.colors.neutral.darkGray,
    },
    menuItemTextActive: {
        color: theme.colors.primary.default,
        fontWeight: theme.fontWeight.semiBold,
    },
    menuItemCheckmark: {
        width: 24,
        height: 24,
        borderRadius: 12,
        backgroundColor: `${theme.colors.primary.default}15`,
        alignItems: "center",
        justifyContent: "center",
    },
})

